<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Cheresting" />
  <!-- 自动添加dayjs到全局 -->
  <script src="./publicJs/dayjs.min.js"></script>
  <!-- 自动添加vue到全局 -->
  <script src="./publicJs/vue.global.prod.js"></script>
  <!-- 自动添加axios到全局 -->
  <script src="./publicJs/axios.min.js"></script>
  <!-- 自动添加Cookies到全局 -->
  <script src="./publicJs/js.cookie.min.js"></script>
  <!-- 自动添加XLSX到全局 -->
  <script src="./publicJs/xlsx.core.min.js"></script>

  <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
  <!-- 自动添加ElementPlus到全局 -->
  <script src="./publicJs/element-plus.index.full.js"></script>
  <script src="./publicJs/index.iife.min.js"></script>
  <!-- 添加组件到全局 -->
  <script src="./components/production-order-info.js"></script>
  <script src="./components/production-process-info.js"></script>
  <script src="./components/production-bom-info.js"></script>

  <title>驱动器物料齐套率</title>
</head>

<body>
  <div id="app">
    <el-container style="height: 100%;">
      
      <el-header>
        <div class="header-wrapper">
          <el-text class="mx-1" size="large">驱动器物料齐套率</el-text>
          <el-button class="DLBT" type="primary" round @click="MTLackDownload" >将选中日期的所有缺料导出成Excel</el-button>
        </div>
      </el-header>
      <el-container>
        <el-main style="padding-right: 0%;">
          <el-table-v2
            :columns="columns1"
            :data="tableData1"
            :width="430"
            :height="tableHeight1"
            fixed
            :row-event-handlers="handleRowClick1"
            style="margin-right: 20px;"
          >
            <template #empty>
              <div class="flex items-center justify-center h-100%;">
                <el-empty />
              </div>
            </template>
          </el-table-v2>
        </el-main>
        <el-main style="padding-left: 0%;">
          <el-table-v2
            :columns="columns2"
            :data="tableData2"
            :width="1100"
            :height="tableHeight2"
            fixed
            :row-event-handlers="handleRowClick2"
            style="margin-left: 20px;"

          >
            <template #empty>
              <div class="flex items-center justify-center h-100%;">
                <el-empty />
              </div>
            </template>
          </el-table-v2>
        </el-main>
      </el-container>



      <el-footer>

      </el-footer>
    </el-container>
    <el-dialog v-model="dialogTableVisible" :width="1250">
      <el-table-v2
          :columns="columns3"
          :data="tableData3"
          :width="1200"
          :height="tableHeight3"
          fixed

        >
          <template #empty>
            <div class="flex items-center justify-center h-100%;">
              <el-empty />
            </div>
          </template>
        </el-table-v2>
    </el-dialog>
  </div>
</body>
<script type="module">
  import useMyXlsx from './hooks/useMyXlsx.js'
  let myXlsx = useMyXlsx()
  import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
  import myAxios from './myAxios/myAxios.js'
  const { Share,UploadFilled, Search,Moon, Sunny,Calendar,Warning,CaretTop,Filter  } = ElementPlusIconsVue
  const { ElImage, ElLoading,ElTag,ElButton,ElIcon, } = ElementPlus

  const { createApp, ref, reactive, computed, h ,onMounted} = Vue
  
 
  const app = createApp({
    name: 'qdqwlqtl',
    setup() {
      const focusDay=ref('');
      const LackData=ref([]);
      const hide100 = ref(false);
      const tableData1 = ref([
      ]);
      const rawData2 = ref([]); // 你的原始数据

      // 过滤后的数据
      const tableData2 = computed(() => {
        if (!hide100.value) return rawData2.value;
        return rawData2.value.filter(row => row.DATA2 !== '100.00');
      });

      const tableData3 = ref([
      ]);
      const columns1=ref([
        {Key: 'RECORDDAY',dataKey: 'RECORDDAY',title: '数据记录日期',width: 160,align: 'center',},
        {Key: 'TYPE',dataKey: 'TYPE',title: '数据类型',width: 100,align: 'center',},
        {Key: 'DATA',dataKey: 'DATA',title: '数据',width: 80,align: 'center',},
        {Key: 'FACTORY',dataKey: 'FACTORY',title: '工厂',width: 80,align: 'center',},

      ])
      const columns2=ref([
        {Key: 'MCTYPE',dataKey: 'MCTYPE',title: '整机类型',width: 50,align: 'center',},
        {Key: 'SN',dataKey: 'SN',title: '序列号',width: 100,align: 'center',},
        {
          key: 'DATA2',
          dataKey: 'DATA2',
          title: '物料齐套率',
          width: 90,
          align: 'center',
          headerCellRenderer: () => {
            return h('div', {
              style: { 
                display: 'inline-flex',       
                alignItems: 'center',
                justifyContent: 'center',
                width: '100%',
                height: '100%'
               }
            }, [
              h('span', { style: { marginRight: '4px' } }, '物料齐套率'),
              h(ElIcon, {
                style: { marginLeft: '4px', cursor: 'pointer' },
                onClick: () => {
                  hide100.value = !hide100.value;
                }
              }, {
                default: () => h(Filter)
              })
            ]);
          }
        },        
        {Key: 'DATA3',dataKey: 'DATA3',title: '物料齐套数量',width: 80,align: 'center',},
        {Key: 'DATA4',dataKey: 'DATA4',title: '物料需求数量',width: 80,align: 'center',},
        {Key: 'FACTORY',dataKey: 'FACTORY',title: '工厂',width: 80,align: 'center',},
        {Key: 'EXPECTDATE',dataKey: 'EXPECTDATE',title: '车间排程',width: 130,align: 'center',},
        {Key: 'CREATETIME',dataKey: 'CREATETIME',title: '周二数据创建时间',width: 130,align: 'center',},
        {Key: 'UPDATETIME',dataKey: 'UPDATETIME',title: '下周日数据刷新时间',width: 130,align: 'center',},
        {Key: 'ISFINISH',dataKey: 'ISFINISH',title: '整机是否领料',width: 60,align: 'center',},
        {Key: 'DATA1',dataKey: 'DATA1',title: 'T表示本周之内未完成',width: 100,align: 'center',},
      ])
      const columns3=ref([
        {Key: 'MATNAME',dataKey: 'MATNAME',title: '物料名称',width: 280,align: 'center',},

        {Key: 'PARTORDER',dataKey: 'PARTORDER',title: '部件订单',width: 100,align: 'center',},
        {Key: 'MATCODE',dataKey: 'MATCODE',title: 'BOM物料',width: 100,align: 'center',},
        {Key: 'PLANQTY',dataKey: 'PLANQTY',title: '计划数量',width: 80,align: 'center',},
        {Key: 'YFLQTY',dataKey: 'YFLQTY',title: '已发料数',width: 80,align: 'center',},
        {Key: 'ALLOCATEQTY',dataKey: 'ALLOCATEQTY',title: '周二分配库存数量',width: 80,align: 'center',},
        {Key: 'LACKQTY',dataKey: 'LACKQTY',title: '最后欠缺数',width: 80,align: 'center',},
        {Key: 'GOODQTYFP',dataKey: 'GOODQTYFP',title: '下周日检验合格数分配',width: 80,align: 'center',},
        {Key: 'DATA1',dataKey: 'DATA1',title: '下周一检验合格数分配',width: 80,align: 'center',},
        {Key: 'MATCODETYPE',dataKey: 'MATCODETYPE',title: '物料类型',width: 220,align: 'center',},
      ])
      const dialogTableVisible = ref(false);
      const HEADER_HEIGHT = 50; 
      const ROW_HEIGHT_ESTIMATE = 50; 
      const MAX_HEIGHT = window.innerHeight - 150; 
      const tableHeight1 = computed(() => {
        const contentHeight = HEADER_HEIGHT + (tableData1.value.length * ROW_HEIGHT_ESTIMATE);
        return Math.min(contentHeight, MAX_HEIGHT);
      });
      const tableHeight2 = computed(() => {
        const contentHeight = HEADER_HEIGHT + (tableData2.value.length * ROW_HEIGHT_ESTIMATE);
        return Math.min(contentHeight, MAX_HEIGHT);
      });
      const tableHeight3 = computed(() => {
        const contentHeight = HEADER_HEIGHT + (tableData3.value.length * ROW_HEIGHT_ESTIMATE);
        return Math.min(contentHeight, MAX_HEIGHT);
      });
      function toDateOnly(dateTimeString) {
        if (!dateTimeString) return '';
        return dateTimeString.split('T')[0]; 
      }
      const handleRowClick1 = {
        onClick: (event, row) => {
          const recordDay = event.rowData.originRecDay;
          const formatted = recordDay.replace('T', ' ').replace(/-/g, '/');
          focusDay.value=formatted;
          getTableDatas2(formatted);
        },  
        
      };
      const handleRowClick2 = {
        onClick: (event, row) => {
          
          // const m = event.rowData.MATCODE;
          const w = event.rowData.WEEKLACKID;

          getTableDatas3(w);
          console.log(w)
        },  
        
      };
      let getTableDatas1 = function () {
        let params = ''
        let name = '丁允鑫驱动器齐套率查询1'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              tableData1.value=res;
              tableData1.value = tableData1.value.map(v => ({
                TYPE:v.TYPE,
                DATA:v.DATA,
                FACTORY:v.FACTORY,
                RECORDDAY: toDateOnly(v.RECORDDAY) ,
                originRecDay:v.RECORDDAY,
              }));
            } else {
              showWarning('获取数据失败res!' + res)
            }
            
          })
          .catch((err) => {
            
            showWarning('获取数据失败err!' + err)
          })
      }
      getTableDatas1();
      
      let getTableDatas2 = function (recordDay) {
        let params = recordDay
        let name = '丁允鑫驱动器齐套率查询2'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              rawData2.value=res;
              rawData2.value = rawData2.value.map(v => ({
                MCTYPE:v.MCTYPE,
                SN:v.SN,
                FACTORY:v.FACTORY,
                DATA2:v.DATA2,
                DATA3:v.DATA3,
                DATA4:v.DATA4,
                EXPECTDATE:toDateOnly(v.EXPECTDATE),
                CREATETIME:toDateOnly(v.CREATETIME),
                UPDATETIME:toDateOnly(v.UPDATETIME),
                ISFINISH:v.ISFINISH,
                DATA1:v.DATA1,
                WEEKLACKID:v.WEEKLACKID,
              }));
              
            } else {
              showWarning('获取数据失败res!' + res)
            }
            
          })
          .catch((err) => {
            
            showWarning('获取数据失败err!' + err)
          })
      }

      let getTableDatas3 = function (w) {
        let params = w
        let name = '丁允鑫驱动器齐套率查询3'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              tableData3.value=res;
              dialogTableVisible.value=true;
              
            } else {
              showWarning('获取数据失败res!' + res)
            }
            
          })
          .catch((err) => {
            
            showWarning('获取数据失败err!' + err)
          })
      };
      let getMTLackDatas = function () {
        let params = focusDay.value;
        let name = '丁允鑫齐套率查询缺损物料1';
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              LackData.value=res;
              Download(LackData,ExportOption_bomSum);
              
            } else {
              showWarning('获取数据失败res!' + res)
            }
            
          })
          .catch((err) => {
            
            showWarning('获取数据失败err!' + err)
          })
      };
      let ExportOption_bomSum = {
        titles: {
          'MATNAME': '物料名称',
          'PARTORDER': '部件订单',
          'MATCODE': 'BOM物料',
          'PLANQTY': '计划数量',
          'YFLQTY': '已发料数',
          'ALLOCATEQTY': '周二分配库存数量',
          'LACKQTY': '最后欠缺数',
          'GOODQTYFP': '下周日检验合格数分配',
          'DATA1': '下周一检验合格数分配',
          'MATCODETYPE': '物料类型',
        },
        header: ['MATNAME', 'PARTORDER', 'MATCODE', 'PLANQTY', 'YFLQTY', 'ALLOCATEQTY', 'LACKQTY', 'GOODQTYFP','DATA1', 'MATCODETYPE'],
        hideColumns: ['WEEKLACKDETAILID','WEEKLACKID']
      };
      const Download = (data, bomSum) => {
        myXlsx.exportDatas(
          data.value, bomSum
        )
      };
      const MTLackDownload=()=>{
        if(focusDay.value!='')
        {
          getMTLackDatas();
        }
        else
        showWarning('点击左侧相应数据行以获取日期！');
        
        
      }


      onMounted(() => {
        


      });

      return {
        tableData1,tableData2,tableData3,
        columns1,columns2,columns3,
        tableHeight1,tableHeight2,tableHeight3,
        dialogTableVisible,
        getTableDatas1,getTableDatas2,getTableDatas3,
        handleRowClick1,handleRowClick2,
        MTLackDownload,





      };
    },
  });
  
  // 使用Element Plus
  app.use(ElementPlus)
  app.mount('#app')
</script>
<style>

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #app {
      height: 100%;
    }
    :root {
      --menu-bg-color: #b3c0d1;
      --menu-text-color: #050505;
      --menu-active-text-color: #ffd04b;
      --bg-color-page: #f5f5f5;
      --bg-color-aside: #d3dce6;
      --color-aside-text: #333;
      --bg-color-header: #b3c0d1;
      --color-header-text: #333;
      --bg-color-main: #e9eef3;
      --color-main-text: #333;
      --bg-color-footer: #b3c0d1;
      --color-footer-text: #333;
      --bg-color-card: #ffffff;
      --color-text-primary: #000000;
      --color-text-secondary: #606266;
      --el-bg-color-overlay: #fff;
    }
    .el-container {
      height: 100%;
    }
    .el-aside {
      background-color: var(--bg-color-aside);
      color: var(--color-aside-text);
      width: 500px;
    }

    .el-header {
      background-color: var(--bg-color-header);
      color: var(--color-header-text);
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
    }


    .el-main {
      background-color: var(--bg-color-main);
      color: var(--color-main-text);
      
    }

    .el-footer {
      background-color: var(--bg-color-footer);
      color: var(--color-footer-text);
      height: 30px;

    }
    .centerFlex{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .el-table-v2 {
      color: var(--color-text-primary);
 

    }
    .el-table-v2__row {
      color: var(--color-text-primary); 
    }
    .el-table-v2__cell {
      background-color: transparent; 
      color: inherit; 
      border-right: 1px solid #4c4c4c; 
      border-bottom: 1px solid #3a3a3a; 
    }
    .el-table-v2__cell:last-child {
        border-right: none; 
    }
    .el-table-v2__row:hover {
      background-color: #d6d4d4 !important; 
    }
    .el-table-v2::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .header-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      width: 100%;
    }

    .DLBT {
      margin-left: auto;
    }

</style>

</html>